<template>
  <!-- 联系我们 -->
  <div class="container">
    <Breadcrumb :list="['项目中心']" />
    <div class="main">
      <div class="title">
        <div class="a"></div>
        <div class="font">项目中心</div>
      </div>
      <div class="search">
        <el-form>
            <el-row>
                <el-col :span="6"><el-form-item label="项目名称">
                    <el-input v-model="form.name" placeholder="请输入" /> </el-form-item></el-col>
                <el-col :span="6" style="margin-left:41px"><el-form-item label="项目类型">
                    <el-select v-model="form.type" placeholder="请选择">
                        <el-option label="选项1" value="shanghai" />
                        <el-option label="选项2" value="beijing" />
                    </el-select> </el-form-item></el-col>
                <el-col :span="10" style="margin-left:41px">
                    <el-form-item label="发布时间">
                        <el-col :span="11">
                          <el-date-picker v-model="form.date1" type="date" placeholder="请选择" style="width: 100%" />
                        </el-col>
                        <el-col :span="2" class="text-center">
                          <span class="text-gray-500">&nbsp;&nbsp;至</span>
                        </el-col>
                        <el-col :span="11">
                          <el-date-picker v-model="form.date2" type="date" placeholder="请选择" style="width: 100%" />
                        </el-col>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
      </div>
      <div class="mianinfo">
        <div class="detail" v-for="i in 4">
          <img src="@/assets/images/floor_b.png" alt="" />
          <p class="top">
            <span style="color: red">[成果转化]</span>&nbsp;项目标题文字描述内容
          </p>
          <p class="describe">
            文字描述内容文字描述内容文字描述内容文字描述内容文字描述内容文字描述内容文字描述字描内容文字描述内容文字描述内容文字描述内容文字描述字描内容文字描述内容文字描述内容文字描述内容文字描述字描内容文字描述内容文字描述内容文字描述内容文字描述字描述内容文字描述内容文字描述内容文字描述内容文字描述内容文字描述字描述内容文字描述内容文字描述内容文字描述内容文字描述内容文字描述文字描述内容文字描述内容文字描述内容文字描述内容文字描述内容文字描述内容文字描述内容文字描述文字描述内容
          </p>
          <p class="date">发布日期：2023-07-15 13:45:20</p>
        </div>
      </div>
      <div class="pagination">
        <el-pagination v-model:current-page="currentPage4" :small="small" :disabled="disabled" :background="background"
          layout="total,  prev, pager, next," :total="400" prev-text="上一页" next-text="下一页" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import Breadcrumb from "@/components/Breadcrumb.vue";
const currentPage4 = ref(1);
const small = ref(false);
const background = ref(true);
const disabled = ref(false);

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
};
const form = reactive({
  name: "",
  type: "",
  date1: "",
  date2: "",
});

const onSubmit = () => {
  console.log("submit!");
};
</script>

<style scoped lang="less">
.container {
  width: 1200px;
  margin: 0 auto 40px;

  .main {
    overflow: hidden;
    height: 950px;
    background-color: #ffffff;
    box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06);
    position: relative;

    .title {
      font-size: 24px;
      font-weight: 400;
      position: relative;

      .a {
        width: 6px;
        height: 24px;
        background: #009cf2;
        position: absolute;
        top: 40px;
        left: 40px;
      }

      .font {
        position: absolute;
        left: 58px;
        top: 35px;
      }
    }

    .search {
      width: 1120px;
      height: 52px;
      margin: 0 auto;
      background-color: #f6f6f6;
      position: absolute;
      top: 86px;
      left: 40px;
      padding-top : 20px;
      padding-left: 19px;
    }

    .mianinfo {
      position: absolute;
      top: 178px;
      left: 60px;
      width: 1080px;

      .detail {
        width: 1080px;
        height: 160px;
        border-bottom: 1px solid #EEEEEE;
        +div {
          padding-top: 10px;
        }

        img {
          width: 210px;
          height: 140px;
          float: left;
          padding-right: 20px;
        }

        .top {
          font-size: 18px;
          color: #222222;
          line-height: 40px;
          font-weight: bold;
        }

        .describe {
          font-size: 14px;
          color: #666666;
          line-height: 26px;
          overflow: hidden;
          text-overflow: ellipsis;
          width:848px;
          height:52px;
        }

        .date {
          margin-top: 15px;
          font-size: 14px;
          color: #999999;
          line-height: 40px;
        }
      }
    }

    .pagination {
      position: absolute;
      bottom: 20px;
      right: 40px
    }



  }
}
</style>
